<template>
    <div class="w">
       <div class="q">
        <img src="../images/15.png" alt="">
       </div>
       <div class="e">
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>销量排行</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>销量排行</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>销量排行</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>销量排行</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>销量排行</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/0.2.png" alt="">
                <span>销量排行</span>
            </li>
        </ul>
       </div>
       <div class="a">
        <ul>
            <li>
                <button>10万以下</button>
            </li>
        </ul>
        <ul>
            <li>
                <button>10万以下</button>
            </li>
        </ul>
        <ul>
            <li>
                <button>10万以下</button>
            </li>
        </ul>
        <ul>
            <li>
                <button>10万以下</button>
            </li>
        </ul>
        <ul>
            <li>
                <button>10万以下</button>
            </li>
        </ul>
        <ul>
            <li>
                <button>10万以下</button>
            </li>
        </ul>
        <ul>
            <li>
                <button>10万以下</button>
            </li>
        </ul>
        <ul>
            <li>
                <button>10万以下</button>
            </li>
        </ul>
       </div>
       <div class="s">
        <ul>
            <li><img src="../images/16.png" alt=""></li>
            <span>本田</span>
        </ul>
        <ul>
            <li><img src="../images/16.png" alt=""></li>
            <span>本田</span>
        </ul>
        <ul>
            <li><img src="../images/16.png" alt=""></li>
            <span>本田</span>
        </ul>
        <ul>
            <li><img src="../images/16.png" alt=""></li>
            <span>本田</span>
        </ul>
        <ul>
            <li><img src="../images/16.png" alt=""></li>
            <span>本田</span>
        </ul>
        <ul>
            <li><img src="../images/16.png" alt=""></li>
            <span>本田</span>
        </ul>
       </div>
       <div class="f">
        <ul><li>
            <img src="../images/17.png" alt="">
        </li></ul>
        <ul><li>
            <img src="../images/17.png" alt="">
        </li></ul>
        <ul><li>
            <img src="../images/17.png" alt="">
        </li></ul>
       </div>
       <div class="z">
        <span>看过</span>
        <button>小鹏P7</button>
       </div>
       <div class="v">
        <ul>
            <li>
                <img src="../images/18.png" alt="">
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/19.png" alt="">
            </li>
        </ul>
       </div>
       <div class="b">
        <span>A</span>
        <p>只看新能源</p>
        <h1>只看在售</h1>
       </div>
       <div class="m">
        <ul>
            <li>
                <img src="../images/20.png" alt="">
                <span>奥迪</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/20.png" alt="">
                <span>埃安</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/20.png" alt="">
                <span>AITO</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/20.png" alt="">
                <span>奥迪</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/20.png" alt="">
                <span>奥迪</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/20.png" alt="">
                <span>阿斯顿.马丁</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/20.png" alt="">
                <span>阿尔法.罗密欧</span>
            </li>
        </ul>
        <ul>
            <li>
                <img src="../images/20.png" alt="">
                <span>阿维塔</span>
            </li>
        </ul>
       </div>
    </div>
</template>

<script>

</script>

<style lang="scss" scoped>
.w{
    flex-wrap: wrap;
    display: flex;
    width: 100%;
.q{
    
    justify-content: center;
    display: flex;
    width: 100%;
    height: 300px;
    // background-color: aqua;
}
.e{
    display: flex;
    width: 100%;
    height: 150px;
    // background-color: burlywood;
    img{
        display: flex;
        width: 100px;
    }
    span{
        font-size: 20px;
    }
    ul{
        margin: 10px;
        margin-left: 15px;
    }
}
.a{
    flex-wrap: wrap;
    display: flex;
    width: 100%;
    height: 150px;
    // background-color: aquamarine;
    ul{
        margin: 10px;
        margin-left: 20px;
    }
}
.s{
    width: 100%;
    height: 130px;
    // background-color: aqua;
    display: flex;
    img{
        width: 70px;
    }
    span{
        margin-left: 10px;
        font-size: 20px;
    }
    ul{
        margin: 15px;
        margin-left: 30px;
    }
}
.f{
    width: 100%;
    height: 150px;
    // background-color: coral;
    display: flex;
    img{
        text-align: center;
        width: 200px;
        margin-left: 30px;
    }
  
}
.z{
    width: 100%;
    height: 100px;
    display: flex;
    // background-color: aquamarine;
    span{
        font-size: 40px;
        line-height: 100px;
        margin-left: 20px;
    }
    button{

        width: 150px;
        height: 70px;
       margin-left: 50px;
       margin-top: 15px;
       border: none;
       background-color: rgb(248, 243, 243);
    }
}
.v{
    width: 100%;
    height: 150px;
    display: flex;
    // background-color: coral;
    img{
        width: 350px;
    }
    ul{
        margin: 10px;
    }
}
.b{
    display: flex;
    width: 100%;
    height: 100px;
    // background-color: aqua;
span{
    margin-left: 20px;
}
p{
    color: gray;
    font-size: 30px;
   margin-left: 350px;
    margin-top: 10px;
}
h1{
    color: gray;
    font-size: 30px;
    margin-top: 10px;
    margin-left: 40px;
}
}
.m{
    width: 100%;
    height: 1000px;
    // background-color: rgb(56, 149, 149);
    span{
        margin-left: 40px;
        margin-top: -20px;
    }
    ul{
        margin: 40px;
    }
}
}
</style>